<!DOCTYPE html>
<html class="zy-page" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: header(~{::title},~{::link},~{::style})">
    <title></title>

    <style>
        .select-tree{
            cursor: pointer;
        }
        .select-tree + .layui-edge{
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -3px;
            border-width: 6px;
            border-top: 6px solid #c2c2c2;
        }
    </style>
</head>
<body class="zy-page">
<div class="zy-page-form">
    <div class="row">
        <div class="col-lg-7 col-lg-offset-2 col-sm-12">
            <form class="layui-form" action="" lay-filter="example">
                <input type="hidden" name="id" th:value="${dto?.id}">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="text-danger">*</span> 登录名：</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入登录名" class="layui-input" th:value="${dto?.username}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="text-danger">*</span> 用户名称：</label>
                    <div class="layui-input-block">
                        <input type="text" name="nickname" lay-verify="required" placeholder="请输入用户名称" autocomplete="off" class="layui-input" th:value="${dto?.nickname}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="text-danger">*</span> 所属部门：</label>
                    <div class="layui-input-block">
                        <input type="text" id="tree" name="deptId" lay-filter="tree" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="text-danger">*</span> 职务：</label>
                    <div class="layui-input-block">
                        <select id="postId" name="postId" lay-verify="" lay-search lay-filter="postId">
                            <option value="">请选择职务（可搜索）</option>
                            <option th:each="p : ${postList}" th:value="${p.id}" th:text="${p.postName}"></option>
                        </select>
                    </div>
                </div>
<!--                <div class="layui-form-item">-->
<!--                    <label class="layui-form-label"><span class="text-danger">*</span> 性别：</label>-->
<!--                    <div class="layui-input-block">-->
<!--                        <input type="radio" name="sex" value="1" title="男" th:checked="${dto?.sex eq '1' || #lists.isEmpty(dto)}">-->
<!--                        <input type="radio" name="sex" value="2" title="女" th:checked="${dto?.sex eq '2'}">-->
<!--                    </div>-->
<!--                </div>-->

                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="text-danger">*</span> 角色：</label>
                    <div class="layui-input-block">
                        <input type="radio" th:each="r : ${roleList}" name="roleList" th:value="${r.id}" th:title="${r.title}" th:checked="${!#lists.isEmpty(dto?.roles)}?${#lists.contains(dto?.roles, r)}" lay-filter="role">
                    </div>
                </div>


                <div class="form-actions zy-form-bottom-btn">
                    <div class="row">
                        <div class="col-sm-12 col-md-12">
                            <button class="btn btn-default close-page">取消</button>
                            <button class="btn btn-primary" lay-submit=""><i class="fa fa-save"></i>提交</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>

</div>


<div th:replace="common/htmlJS::common_js(~{::script})">
    <script th:inline="javascript">
        layui.config().extend({
            treeSelect: '{/}/plugins/treeSelect/treeSelect'
        });

        layui.use(['treeSelect','form'], function(){
            var form = layui.form
                ,layer = layui.layer,
                treeSelect= layui.treeSelect;

            treeSelect.render({
                // 选择器
                elem: '#tree',
                // 数据
                data: basePath+'/system/dept/list/tree/user',
                // 请求头
                headers: {},
                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '请选择部门（可搜索）',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 一些可定制的样式
                style: {
                    folder: {
                        enable: true
                    },
                    line: {
                        enable: true
                    }
                },
                // 点击回调
                click: function(d){
                    console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    var deptId = [[${dto?.deptId}]];
                    if(CommnUtil.notEmpty(deptId)){
                        treeSelect.checkNode('tree', deptId);
                        treeSelect.refresh('tree');
                    }

                }
            });

            var postId = [[${dto?.postId}]];
            form.val('example', {
                'postId': postId
            });
            form.render('select');

            //自定义验证规则
            form.verify({
            });

            //监听提交
            form.on('submit', function(data){
                if(!CommnUtil.notNull(data.field.deptId)){
                    layer.msg('请选择部门', {icon: 2,shift: 6});
                    return false;
                }
                if(!CommnUtil.notNull(data.field.postId)){
                    layer.msg('请选择职务', {icon: 2,shift: 6});
                    return false;
                }
                if(!CommnUtil.notNull(data.field.roleList)){
                    layer.msg('请选择角色', {icon: 2,shift: 6});
                    return false;
                }
                //给角色赋值
                delete data.field["roleList"];
                var selectRole = [];
                $('input[name="roleList"]:checked').each(function(){
                    selectRole.push({"id":$(this).val()});
                });
                data.field.roles = selectRole;
                zy.ajaxJson({
                    url:basePath+"/system/user/save",
                    data:JSON.stringify(data.field),
                    success:function(result){
                        if (result.code == 200) {
                            parent.layer.msg('操作成功');
                            parent._table.draw(false);
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        } else {
                            layer.msg(result.msg, {icon: 2,shift: 6});
                        }
                    }
                });
                return false;
            });

        });
    </script>
</div>
</body>
</html>